<template>
  <el-dialog title="直播间商品" :close-on-click-modal="false" :visible.sync="outerVisible" width="800px" append-to-body>
    <el-form ref="form" :model="form" size="small" label-width="140px">
      <el-button type="primary" @click="openSelectGoods">选择商品</el-button>
      <el-table :data="goodsList" v-loading="tableLoading" row-key="Id" border style="width: 100%;margin-top: 20px ">
        <!--        <el-table-column type="selection" width="55"/>-->
        <!--        <el-table-column prop="goods_id" label="直播商品id"/>-->

        <!--        <el-table-column prop="product_id" label="关联商品id"/>-->
        <el-table-column prop="cover_img_url" label="商品图片">
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="hover">
              <a :href="scope.row.cover_imge_url" target="_blank" title="查看最大化图片">
                <img :src="scope.row.cover_imge_url"
                     style="width: 300px;height: 300px"/></a>
              <img slot="reference" :src="scope.row.cover_imge_url" @click="$openImg(scope.row.cover_imge_url)"
                   style="width: 50px;height: 50px; cursor:pointer"/>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称"/>
        <!--      <el-table-column prop="url" label="商品小程序路径"/>-->
        <el-table-column label="销售价格">
          <template slot-scope="scope">
            {{scope.row.price}}元
            <span v-if="scope.row.price2">
              ~{{scope.row.price2}}元
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="price_type" label="价格类型">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.price_type == 1" :type="''">一口价</el-tag>
              <el-tag v-else-if="scope.row.price_type == 2" :type="''">价格区间</el-tag>
              <el-tag v-else-if="scope.row.price_type == 3" :type="''">显示折扣价</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="audit_status" label="微信审核状态">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.audit_status === 0" :type="''">未审核</el-tag>
              <el-tag v-else-if="scope.row.audit_status === 1" :type="''">审核中</el-tag>
              <el-tag v-else-if="scope.row.audit_status === 2" :type="''">审核通过</el-tag>
              <el-tag v-else-if="scope.row.audit_status === 3" :type="''">审核失败</el-tag>
            </div>
          </template>
        </el-table-column>
        <!--        1, 2：表示是为api添加商品，否则是直播控制台添加的商品-->
        <!--        <el-table-column prop="third_party_tag" label="添加途径">-->
        <!--          <template slot-scope="scope">-->
        <!--            <div>-->
        <!--              <el-tag v-if="scope.row.third_party_tag == 0" :type="''">api添加</el-tag>-->
        <!--              <el-tag v-else-if="scope.row.third_party_tag == 2" :type="''">控制台</el-tag>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="removeLiveGoods(scope.row)">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="handleCancel">取消</el-button>
      <el-button :loading="crud.cu === 2" type="primary" @click="handleCloseOrder" :disabled="isDisabled">确认上架
      </el-button>
    </div>
    <live-select-goods ref="selectGoods" selectType="goods" :idList="idList"
                       @selectGoods="handleSelectGoods"></live-select-goods>
  </el-dialog>
</template>

<script>
  import wechatLiveApi from '@/api/wechatLive.js'
  import liveSelectGoods from './live_select_goods'

  export default {
    components: {
      liveSelectGoods
    },
    data () {
      return {
        params: {
          page: 1,
          limit: 10
        },
        totalPage: 0,
        crud: {},
        form: {},
        goodsList: [],
        idList: [],
        isDisabled: false,
        showGoodsShop: false,
        outerVisible: false,
        roomId: '',
        tableLoading: false
      }
    },

    methods: {
      init (id) {
        this.roomId = id
        this.outerVisible = true
        this.goodsList = []
        this.idList = []
        wechatLiveApi.getWechatLive4GoodsList(id).then((res) => {
          if (res && res.data.code === 200) {
            console.log('getWechatLive4GoodsList', res)
            let goodsArray = res.data.data.live_goods_list
            for (let i = 0; i < goodsArray.length; i++) {
              this.goodsList.push(goodsArray[i])
              this.idList.push(goodsArray[i].goods_id)
            }
          }
        })
      },
      removeLiveGoods (row) {
        this.$confirm(`确定要将商品移除至直播间?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            room_id: this.roomId,
            product_id: row.product_id
          }
          wechatLiveApi.wechatLiveRemoveProductId(params).then((res) => {
            if (res && res.data.code === 200) {
              this.$message({
                message: '下架成功',
                type: 'success'
              })
              this.init(this.roomId)
            }
          })
        }).catch(() => {
        })
      },
      handleCancel () {
        this.outerVisible = false
      },
      handleCloseOrder () {
        let that = this
        this.$confirm(`确定要将商品添加至直播间?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('this.goodsList', this.goodsList)
          let goodsId = ''
          for (let i = 0; i < this.goodsList.length; i++) {
            goodsId = goodsId + ',' + this.goodsList[i].goods_id
          }
          let params = {
            room_id: this.roomId,
            wx_goods_ids: goodsId
          }
          wechatLiveApi.wechatLiveAddProduct(params).then((res) => {
            if (res && res.data.code === 200) {
              this.$message({
                message: '添加到直播间成功',
                type: 'success'
              })
              that.outerVisible = false
            }
          })
        }).catch(() => {
        })
      },
      openSelectGoods () {
        this.$nextTick(() => {
          this.$refs.selectGoods.open()
        })
      },
      handleSelectGoods (selectList) {
        for (let i = 0; i < selectList.length; i++) {
          this.goodsList.push(selectList[i])
        }
      }
    }
  }
</script>

<style lang="scss">
</style>
